<template>
	<view class="user-center">
		<g-navbar title="个人中心" />
		<view class="main">
			<view class="user-info-wrapper">
				<!-- 头像 -->
				<view class="cell-item">
					<view class="label">
						头像
					</view>
					<view class="value" @click="editAvatar">
						<image :src="userInfo.avatars?userInfo.avatars:'/static/img/avatar.png'" mode="aspectFill"
							class="avatar"></image>
					</view>
				</view>
				<!-- 昵称 -->
				<view class="cell-item">
					<view class="label">
						昵称
					</view>
					<view class="value" @click="editUsername">
						{{userInfo?userInfo.nickname:'未登录'}} <i class="iconfont icon-arrow-right icon" />
					</view>
				</view>
				<!-- 手机号码 -->
				<view class="cell-item">
					<view class="label">
						手机号码
					</view>
					<view class="value" @click="editPhone">
						{{userInfo?userInfo.phone:'未登录'}} <i class="iconfont icon-arrow-right icon" />
					</view>
				</view>
				<!-- 我的二维码 -->
				<view class="cell-item">
					<view class="label">
						我的邀请码
					</view>
					<view class="value" @click="copy">
						<!-- <i class="iconfont icon-qrcode" /> <i class="iconfont icon-arrow-right icon" /> -->
						{{userInfo?userInfo.share_code:''}} <i class="iconfont icon-copy" v-if="userInfo"></i>
					</view>
				</view>
				<!-- 推荐人 -->
				<view class="cell-item">
					<view class="label">
						推荐人
					</view>
					<view class="value">
						{{userInfo?userInfo.parent:'未登录'}}
					</view>
				</view>
				<!-- 更换绑定微信账号 -->
				<view class="cell-item" @click="jump('/pages/bind_wechat_authorization/bindWechatAuthorization')">
					<view class="label">
						更换绑定微信账号
					</view>
					<view class="value">
						<i class="iconfont icon-arrow-right icon" />
					</view>
				</view>
			</view>
			<view class="btn-wrapper">
				<button class="btn" @click="logout">退出登录</button>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import REST_URL from '@/http/http.restUrl';
	import { useStore } from 'vuex';
	import { useUserData } from '@/hooks/useUserData';
	import { useToken } from '@/hooks/useToken';
	import { useLoginStatus } from '@/hooks/useLoginStatus';
	import { baseUrl } from '@/http';
	import { GET_STORE_USERINFO } from '@/store/gettersType';

	const { getTokenSync, removeTokenSync } = useToken();


	const editAvatar = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: async (res) => {

				const token = getTokenSync();
				uni.showLoading({})
				console.log('res.tempFilePaths[0]=======>', res.tempFilePaths[0])


				let options : UniApp.UploadFileOption;


				const success = async (res : UniApp.UploadFileSuccessCallbackResult) => {

					const result = JSON.parse(res.data);

					if (result.status === 200) {
						const avatar : string = result.data.file_url;
						await uni.http.POST(REST_URL.editUserInfo, {
							customer_id: store.getters[GET_STORE_USERINFO].id,
							avatars: avatar,
						})
						updateUserInfo();
					} else if (result.status == -2) {
						uni.prompt.$showToast('上传的图片不能超过2M');
					} else {
						uni.prompt.$showToast('上传头像失败');
					}
					uni.hideLoading();
				};

				const fail = () => {
					uni.prompt.$showToast('上传头像失败')
					uni.hideLoading();
				}


				// #ifdef H5
				options = {
					url: `${baseUrl.value}/upload/uploadImagesCos`,
					file: res.tempFiles[0],
					header: {
						"Authorization": 'Bearer' + token,
					},
					success,
					fail
				}
				// #endif

				// #ifdef MP-WEIXIN
				options = {
					url: `${baseUrl.value}/upload/uploadImagesCos`,
					filePath: res.tempFilePaths[0],
					header: {
						"Authorization": 'Bearer' + token,
						'Content-Type': 'application/x-www-form-urlencoded',
					},
					name: "file",
					fileType: 'image',
					success,
					fail
				}
				// #endif

				uni.uploadFile(options)




			}
		});
	}
	const store = useStore();

	const { updateUserInfo } = useUserData();

	const editUsername = () => {
		uni.showModal({
			title: '修改用户名',
			editable: true,
			placeholderText: '请输入新的用户名',
			confirmText: '确认修改',
			cancelText: '取消',
			success: async (res) => {
				if (res.confirm) {
					await uni.http.POST(REST_URL.editUserInfo, {
						customer_id: store.getters[GET_STORE_USERINFO].id,
						// avatars: '',
						nickname: res.content,
					})
					updateUserInfo();
				}
			}
		})
	}

	const editPhone = () => {

	}

	const logout = () => {
		uni.showModal({
			title: '退出登录',
			content: '是否退出登录',
			success: (res) => {
				if (res.confirm) {
					const { createGlobalLoginStatusManager } = useLoginStatus();
					removeTokenSync();
					createGlobalLoginStatusManager();
					uni.router.route('/pages_login/login_entry/loginEntry')
				}
			}
		})

	}

	const copy = () => {
		uni.setClipboardData({
			data: store.state.userInfo.share_code,
			success: () => {
				uni.prompt.$showToast('已复制邀请码')
			}
		});
	}

	const jump = (path:string) => {
		uni.router.route(path);
	}
</script>

<style scoped lang="scss">
	@import "./userCenter.scss";
</style>